<template>
	<!-- 订单 -->
	<view class="content">

		<view class="content-title" >
			<view class="content-title-select">
				<view class="input">
					<u-search placeholder="订单编号/家教名称/家教ID" placeholderColor="#dbdbdb" v-model="keyword"
						bgColor="#FFFFFF" borderColor="#999" :showAction="false" @search="search" @clickIcon="clickIcon"
						clearabled @clear="clickClear"></u-search>
				</view>
				<text @click="showSiftFun" class="screen">筛选</text>
			</view>
			<view class="content-title-tab">
				<view :class="[active === ''  ? 'active-tab' : '']" @click="tabChange('')">全部</view>
				<view :class="[active === 0 ? 'active-tab' : '']" @click="tabChange(0)">待支付</view>
				<view :class="[active === 1 ? 'active-tab' : '']" @click="tabChange(1)">进行中</view>
				<view :class="[active === 2 ? 'active-tab' : '']" @click="tabChange(2)">已完成</view>
				<view :class="[active === 3 ? 'active-tab' : '']" @click="tabChange(3)">退款</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="body-list" v-if="bodyList.length!==0">
			<!-- 卡片内容 -->

			<view class="body-item" :key="index" v-for="(item,index) in bodyList" @click="showDetails(item)">
				<!-- 内容头部 -->
				<view class="body-item-title">
					<text>{{item.counsellingName}} ({{item.id}})</text>
					<text v-if="item.orderState == 0" style="color: #F5A623;">待支付</text>
					<text v-else-if="item.orderState == 1" style="color: #979797;">进行中</text>
					<text v-else-if="item.orderState == 2" style="color: #7ED321;">已完成</text>
					<text v-else-if="item.orderState == 3" style="color: red;">申请退款中</text>
					<text v-else style="color: red;">退款成功</text>
				</view>
				<!-- 内容中心 -->
				<view class="body-item-body">
					<view style="display: flex;">
						<text style="display: block;margin-right: 13rpx;">预约时间:</text>
						<view style="display: flex;flex-direction: column;" id="_body-item-text">
							<text :key="zi.fid" v-for="zi in item.counDtos">{{zi.time}} {{zi.fid}} :
								<text :key="z" v-for="(z,index) in zi.childLevel">
									{{ z}} {{ zi.childLevel[zi.childLevel.length-1]===z?'':',' }}</text>
							</text>

						</view>
					</view>
					<view>
						<text style="margin-right: 13rpx;">预约科目:</text>
						<text>{{item.subjectsDtos[0].name ||''}} {{item.subjectsDtos[0].subjectsName ||''}}</text>
					</view>
				</view>
				<!-- 内容底部 -->
				<view class="body-item-foot">
					<text>订单金额:</text>
					<text
						style="font-weight: 600;margin-left: 10rpx;">{{item.orderMoney == 0 ? 0.01 : item.orderMoney}}元</text>
				</view>
			</view>
		</view>

		<view v-else>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" width="750rpx" height="750rpx">
			</u-empty>
		</view>

		<u-popup :show="show" mode="right">
			<view class="header-right" @click="cancellation">
				<u-icon name="close" color="#000" size="28"></u-icon>
			</view>
			<view class="nav-left">
				日期
			</view>
			<!-- 日期选择 -->
			<view class="time-none">
				<view @click="openTime(0)" class="star-time">
					<text
						:style="[{'color':startTime==''? '#cccccc':'#333333'},{'padding': '0 20rpx'}]">{{startTime == '' ? '请选择日期区间' : startTime}}</text>
				</view>

				<text class="to">至</text>
				<view @click="openTime(1)" class="star-time">
					<text
						:style="[{'color':endTime==''? '#cccccc':'#333333'},{'padding': '0 20rpx'}]">{{endTime == '' ? '请选择日期区间' : endTime}}</text>
				</view>
				<!-- 			<u-calendar :show="showtime" :mode="mode" @confirm="confirmTime" :minDate='minDate' :maxDate='maxDate'
					mode="single" allowSameDay closeOnClickOverlay round='15' monthNum='100'
					@close="showtime=false"></u-calendar> -->
				<u-datetime-picker :show="showtime" mode="date" @cancel="showtime=false" v-model="defaultDate"
					@confirm="confirmTime"></u-datetime-picker>
			</view>
			<!-- 订单 -->
			<view class="order-for-goods">
				<text>订单状态</text>
				<view style="display: flex;flex-wrap: wrap;">
					<view :key="item.value" v-for="item in statuList" @click="activeStatuFun(item.value)"
						:class="[activeShow == item.value ? 'activeC' : '','activeN']">
						{{item.label}}
					</view>
				</view>
			</view>
			<!-- 底部 重置 确认 -->
			<view class="floor-none">
				<button @click="resetting" class="floor-resetting">重置</button>
				<button @click="enterSeleceEd" class="floor-determine">确认</button>
			</view>


			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
		</u-popup>
	</view>
</template>

<script>
	import {
		navigationListRece
	} from '../../api/indent/index.js'
	export default {
		data() {
			return {
				// 选择日期
				defaultDate: Number(new Date()),
				// 默认最小日期
				// 显示日期
				showtime: false,
				// 日期选择器
				endTime: '',
				startTime: '',
				// 右侧弹出层
				show: false,
				// 弹出层的订单状态
				activeShow: '',
				// 输入框
				keyword: '',
				// 头部标签
				active: '',

				//弹出框 订单状态
				statuList: [{
					label: '全部订单',
					value: ''
				}, {
					label: '待支付',
					value: '0'
				}, {
					label: '进行中',
					value: '1'
				}, {
					label: '已完成',
					value: '2'
				}, {
					label: '退款',
					value: '3'
				}],
				// 支付项
				bodyList: [],
			}
		},
		methods: {
			// 搜索
			search(res) {
				this.active = ''
				this.interface({
					orderId: res,
					teacherId: res,
					teacherName: res
				})

			},
			// 搜索栏取消
			clickClear() {
				this.interface({

				})
			},
			//点击左侧搜索
			clickIcon() {
				this.active = ''
				this.interface({
					orderId: this.keyword,
					teacherId: this.keyword,
					teacherName: this.keyword
				})

			},
			// 筛选
			showSiftFun() {
				this.show = true
				// 隐藏
				uni.hideTabBar()
				//显示tabbar
			},
			// 选择状态
			tabChange(e) {
				if (e !== undefined) {
					this.active = e
					// console.log(this.active);
					this.interface({
						orderState: e
					})
				}


			},

			// 日历事件
			openTime(e) {
				this.showtime = true
				this.defaultDate = e


			},
			timestampToDate(timestamp) {
				var date = new Date(timestamp);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				return year + '-' + month + '-' + day;
			},
			// 点击日期确定
			confirmTime(e) {

				this.showtime = false
				if (this.defaultDate === 0) {
					this.startTime = this.timestampToDate(e.value)
				} else {
					this.endTime = this.timestampToDate(e.value)
				}
			},
			// 弹出窗选择订单状态
			activeStatuFun(val) {
				this.activeShow = val
			},
			// 重置
			resetting() {
				this.activeShow = -1
				this.endTime = ''
				this.startTime = ''
			},
			// 确定
			enterSeleceEd() {
				console.log(this.activeShow);
				this.show = false

				this.interface({
					timeOn: String(this.startTime),
					timeEnd: String(this.endTime),
					orderState: this.activeShow
				})
				this.active = Number(this.activeShow)
				uni.showTabBar()

			},
			// 查看订单详情
			showDetails(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/orderDetails/orderDetails?obj=${JSON.stringify(item)}`
				})
			},
			// 点击 X 号(筛选)
			cancellation() {
				this.show = false
				uni.showTabBar()
			},
			interface(data) {
				// console.log(data);
				navigationListRece({
					...data,
					openid: uni.getStorageSync('openId')
				}).then(res => {
					if (res.code === 200) {
						this.bodyList = res.rows
					} else {
						this.bodyList = []
					}

				})
			}


		},
		onShow() {
			this.interface()
		},
		mounted() {
			// wx.getSystemInfo({
			// 	success: (res => {
			// 		// console.log(res.statusBarHeight+'px');
			// 		this.statusBarHeight = res.statusBarHeight + 4 + 'px'
			// 	})
			// })
		},


	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background-color: #fff;

	}

	.content-title {
padding-top: 1%;
		width: 100%;

		z-index: 100;
		background-color: #fff;
	}

	.content-title-select {
		padding-left: 2%;
		color: #999;
		width: 94%;
		display: flex;
		justify-content: space-between;

	}

	.screen {
		display: flex;
		align-items: center;
		font-size: 4vw;
	}

	.input {
		width: 78%;
		/* height: 5vh; */
	}

	.content-title-tab {
		/* margin-top: 1%; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.content-title-tab view {
		width: 20%;
		min-width: 100rpx;
		min-height: 6vh;
		justify-content: center;
		display: flex;
		align-items: center;
		text-align: center;

		font-size: 25rpx;
	}

	.active-tab {
		color: #3fc94d;
		border-bottom: #3fc94d 8rpx solid;
		font-weight: 600;
	}

	.body-list {

		padding: 5%;
		/* display: flex; */
		/* justify-content: center; */
		/* flex-wrap: wrap; */
		background-color: #f2f2f2;
		height: 88%;
		overflow: scroll;


	}

	.body-item {
		background-color: #ffffff;
		width: 100%;
		/* height: 400rpx; */
		margin-bottom: 20rpx;
		padding: 5% 0;
		border-radius: 18rpx;
		box-shadow: 10rpx 10rpx #f1f1f1;
	}

	.body-item-title {
		padding: 25rpx 0;
		width: 90%;
		margin: 0 auto;
		border-bottom: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: space-between;
	}

	.body-item-body {
		padding: 25rpx 0;
		width: 90%;
		margin: 0 auto;
	}

	.body-item-body text {
		font-size: 25rpx;
		color: #666666;
	}

	.body-item-foot {
		padding: 25rpx 0;
		width: 90%;
		margin: 0 auto;
		border-top: 2rpx solid #d9d9d9;
	}

	.body-item-foot text {
		font-size: 25rpx;
	}

	#_body-item-text text {
		margin-bottom: 15rpx;
	}

	.activeN {
		padding: 10rpx 25rpx;
		background-color: #f2f2f2;
		font-size: 27rpx;
		margin-right: 25rpx;
		border-radius: 35rpx;
		margin-top: 25rpx;
	}

	.activeC {
		background-color: #f59a23;
		color: #ffffff;
	}

	/* 右侧内容 */
	.header-right {
		margin-top: 150rpx;
		padding: 0 40rpx;
		width: 100%;
		height: 6vh;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.nav-left {
		padding: 0 40rpx;
		width: 100%;
		height: 5vh;
		font-size: 30rpx;
		float: left;
	}

	.time-none {
		display: flex;
		align-items: center;
		;
		padding: 0;
		width: 100%;
		justify-content: space-between;
		padding: 0 40rpx;
	}

	.star-time {
		border: 2rpx solid #ebebeb;
		width: 290rpx;
		height: 70rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		line-height: 70rpx;
	}

	.to {
		font-size: 27rpx;
		margin: 0 40rpx;
	}

	.order-for-goods {
		font-size: 30rpx;
		margin: 20rpx 0;
		padding: 0 35rpx;

	}

	.activeN {
		padding: 15rpx 25rpx;
		background-color: #f2f2f2;
		font-size: 27rpx;
		margin-right: 25rpx;
		border-radius: 35rpx;
		margin-top: 25rpx;
	}

	.activeC {
		background-color: #f59a23;
		color: #ffffff;
	}

	.floor-none {
		display: flex;
		flex-direction: row;
		width: 100%;
		position: absolute;
		bottom: 40rpx;
	}

	.floor-resetting {
		width: 50%;
		background-color: #fff;
		color: #999999;
		border-radius: 0;
		border: none;
	}

	.floor-determine {
		width: 50%;
		background-color: #04BC16;
		color: #ffffff;
		border-radius: 0;
		border: none;
	}
</style>